<template>
  <div class="main">
    <title1 tit="优惠券"></title1>
    <!-- 选项栏 -->
    <van-tabs
      line-width="50%"
      class="tabs"
      style="height: 51px"
      v-model="active"
    >
      <div class="tabtext">
        <van-tab
          title="商城"
          style="font-size: 16px; text-align: center"
        ></van-tab>
        <van-tab
          title="生活服务"
          style="font-size: 16px; text-align: center"
        ></van-tab>
      </div>
    </van-tabs>

    <!-- 优惠券 -->
    <div class="under">
      <div class="youhui">
        <img :src="youhuiList[0]" alt="" />
        <img :src="youhuiList[1]" alt="" />
        <img :src="youhuiList[2]" alt="" />
        <img :src="youhuiList[3]" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
export default {
  data() {
    return {
      active: "",
      youhuiList: [
        require('../../../assets/youhui10.jpg'),
        require('../../../assets/youhui20.jpg'),
        require('../../../assets/youhui50.jpg'),
        require('../../../assets/youhui80.jpg')
      ],
    };
  },
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "Mine" });
    },
  },
};
</script>
        
<style scoped lang="less">
/deep/ .main {
  font-size: 40px;
}
/deep/ .van-tabs{
  height: 51px;
  font-size: 40px;
}
.van-tabs__content .tabtext{
  height: 0;
}
.under {
  height: 1220px;
  background: rgb(237, 237, 237);
  width: 100%;
  .youhui {
    margin-top: -17px;
    margin-left: 64px;
    margin-right: 64px;
    height: 100%;
    img {
      display: inline-block;
      margin-top: 109px;
      margin-left: 5px;
      width: 300px;
      height: 123px;
    }
  }
}
</style>